<template>
    <div class="tab-bar">
      <slot></slot>
    </div>
  </template>
  
  <script setup>
    import useChildren from '../hooks/useChildren'
  
    const { linkChildren } = useChildren('TabBar')
  
    const props = defineProps({
      modelValue: {
        type: Number,
        default: 0,
      },
    })
    const emit = defineEmits(['update:modelValue'])
  
    const setActive = (index) => {
      emit('update:modelValue', index)
    }
  
    // 将props和setActive传给子组件
    linkChildren({
      props,
      setActive,
    })
  </script>
  
  <style scoped>
    .tab-bar {
      position: fixed;
      left: 0px;
      right: 0px;
      bottom: 0px;
      display: flex;
      justify-content: space-between;
      background-color: skyblue;
      box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.3);
    }
  </style>